/* eslint-disable array-callback-return */
// 客户模糊查询
import React, { PureComponent } from 'react';
import { DownOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Button, Card, Col, Input } from 'antd';
import Area from '../../components/Area';
import DictCode from '../../components/DictCode';
import styles from '@/utils/utils.less';

const FormItem = Form.Item;
@Form.create()
class Search extends PureComponent {
  state = {};

  renderFormItem = searchList => {
    const {
      form: { getFieldDecorator },
    } = this.props;

    return searchList.map(item => (
      <Col md={8} sm={24}>
        <FormItem {...this.tableSearchLayout} label={item.label}>
          {getFieldDecorator(item.code, {
            // initialValue: formFieldsValue[item.code],
          })(this.renderComponent(item))}
        </FormItem>
      </Col>
    ));
  };

  renderComponent = item => {
    switch (item.type) {
      case 1:
        return <Input placeholder="请输入" />;
      case 2:
        return <DictCode dictType={item.dictType} />;
      case 3:
        return <Area />;
      default:
        return null;
    }
  };

  toggleForm = () => {
    const { toggleForm } = this.props;
    toggleForm();
  };

  resetSearch = () => {
    const { form } = this.props;
    form.resetFields();
  };

  renderAdvancedForm() {
    const {
      activeKey,
      searchList = [
        { code: 'unitName', type: 1, label: '公司名称' },
        { code: 'accoStatus', type: 2, dictType: 'COMMON_ENABLED_STATUS', label: '账户状态' },
        {
          code: 'areaId',
          type: 3, // <Area>
          label: '执行地区',
        },
      ],
    } = this.props;
    return (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          {this.renderFormItem(searchList.filter((item, index) => index < 3))}
        </Row>

        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          {this.renderFormItem(searchList.filter((item, index) => index > 2))}

          <Col md={8} sm={24} offset={8}>
            <div style={{ float: 'right' }}>
              <span className={styles.submitButtons}>
                <Button type="primary" htmlType="submit" onClick={() => this.getTabNum(activeKey)}>
                  查询
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                  重置
                </Button>
                <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                  收起 <DownOutlined />
                </a>
              </span>
            </div>
          </Col>
        </Row>
      </Form>
    );
  }

  renderSimpleForm() {
    const {
      searchList = [
        { code: 'unitName', type: 1, label: '公司名称' },
        { code: 'accoStatus', type: 2, dictType: 'COMMON_ENABLED_STATUS', label: '账户状态' },
        {
          code: 'areaId',
          type: 3, // <Area>
          label: '执行地区',
        },
      ],
    } = this.props;
    const { activeKey } = this.props;
    return (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          {this.renderFormItem(searchList.filter((item, index) => index < 2))}
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit" onClick={() => this.getTabNum(activeKey)}>
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                重置
              </Button>
              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                展开 <DownOutlined />
              </a>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  renderForm() {
    const { expandForm } = this.props;
    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
  }

  render() {
    return (
      <div>
        <Card className={styles.searchCard} style={{ marginBottom: 16 }} bordered={false}>
          <div className={styles.tableListForm}>{this.renderForm()}</div>
        </Card>
      </div>
    );
  }
}
export default Search;
